<template>
	<el-dialog class="set_dialog" width="1200px" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form class="base_form" :model="submitForm" :rules="rules" ref="ruleForm" label-width="150px">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="商品分类" prop="category_id">
						<!-- <el-input v-model="submitForm.category_id" placeholder="请输入商品分类"></el-input> -->
						<el-select v-model="submitForm.category_id" placeholder="请选择商品品类" clearable>
							<el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="品牌" prop="brand_id">
						<!-- <el-input v-model="submitForm.brand" placeholder="请输入品牌"></el-input> -->
						<el-select v-model="submitForm.brand_id" placeholder="请选择商品品类" clearable>
							<el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="推广名称" prop="extension_title">
						<el-input v-model="submitForm.extension_title" placeholder="请输入推广名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品名称" prop="title">
						<el-input v-model="submitForm.title" placeholder="请输入商品名称"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="商城价格" prop="coin_price">
						<el-input v-model="submitForm.coin_price" placeholder="请输入商城价格"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品售价" prop="price">
						<el-input v-model="submitForm.price" placeholder="请输入售价"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="抽取售价" prop="price">
						<el-input v-model="submitForm.box_price" placeholder="请输入抽取售价"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所需积分" prop="coin">
						<el-input v-model="submitForm.coin" placeholder="请输入所需积分"></el-input>
					</el-form-item>

				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="库存" prop="num">
						<el-input v-model="submitForm.num" placeholder="请输入库存"></el-input>
					</el-form-item>
				</el-col>

				<el-col :span="12">
					<el-form-item label="标签" prop="label">
						<el-input v-model="submitForm.label" placeholder="请输入标签"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="排序" prop="goods_sort">
						<el-input v-model="submitForm.goods_sort" placeholder="请输入排序"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品类型" prop="meal_id">
						<el-input v-model="submitForm.meal_id" placeholder="1传说2史诗3稀有4尊贵"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="购买链接" prop="buy_link">
						<el-input v-model="submitForm.buy_link" placeholder="请输入购买链接"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商品图片" prop="img">
						<crop-upload show-type="photo" :init-val="submitForm.img" file-size="100K" wrapper-width="95px"
							wrapper-height="95px" @setVal="(val) => setUrl(val)" />
					</el-form-item>
				</el-col>

			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="销量" prop="sell_num">
						<el-input v-model="submitForm.sell_num" placeholder="请输入销量"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="商品详情">
				<div class="content">
					<text-editor v-model="submitForm.content" />
				</div>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {
	insertGoods, updateGoods
} from '@/api/goods'

import { getCategoryList, getBrandList } from '@/api/goods'
import cropUpload from '@/components/cropUpload'
import textEditor from '@/components/wangEditor'
export default {
	components: {
		cropUpload,
		textEditor
	},
	props: ['editItem'],
	data() {
		return {
			submitForm: {
				category_id: '',
				title: '',
				extension_title: '',
				img: '',
				price: '',
				box_price:'',
				sell_num: '',
				content: '',
				goods_sort: '',
				label: '',
				num: '',
				brand: '',
				content: '',
				coin_price: '',
				coin: '', //所需积分-存在优惠的情况
				brand_id: '',
				meal_id: '',
				buy_link: '', //购买链接
				id: ''
			},
			form: {
				activity: ''
			},
			rules: {
				category_id: [{
					required: true,
					message: '请选择商品分类',
					trigger: 'blur'
				}],
				title: [{
					required: true,
					message: '请选择商品名称',
					trigger: 'blur'
				}],
				extension_title: [{
					required: true,
					message: '请输入推广名称',
					trigger: 'blur'
				}],
				img: [{
					required: true,
					message: '请选择图片',
					trigger: 'blur'
				}],
				price: [{
					required: true,
					message: '请输入商品价格',
					trigger: 'blur'
				}],
				sell_num: [{
					required: true,
					message: '请输入商品销量',
					trigger: 'blur'
				}],
				content: [{
					required: true,
					message: '请输入商品详情',
					trigger: 'blur'
				}],
				goods_sort: [{
					required: true,
					message: '请选择商品排序',
					trigger: 'blur'
				}],
				label: [{
					required: true,
					message: '请选择商品标签',
					trigger: 'blur'
				}],
				num: [{
					required: true,
					message: '请输入商品库存',
					trigger: 'blur'
				}],
				brand_id: [{
					required: true,
					message: '请输入商品品牌',
					trigger: 'blur'
				}],
				content: [{
					required: true,
					message: '请输入商品详情',
					trigger: 'blur'
				}],
			},
			dialogVisible: false,
			goodsId: null,
			activityList: [],
			categoryList: [],
			brandList: [],
		}
	},
	watch: {
		dialogVisible(val) {
			if (val) {
				if (this.title=='编辑商品') {
					for (const key in this.submitForm) {
						this.submitForm[key] = this.editItem[key]
						if (key == 'price') {
							this.submitForm['price'] = this.editItem['goods_price']
						}
					}
				} else {
					this.submitForm = {
						category_id: '',
						title: '',
						extension_title: '',
						img: '',
						price: '',
						box_price:'',
						sell_num: '',
						content: '',
						goods_sort: '',
						label: '',
						num: '',
						brand: '',
						content: '',
						coin_price: '',
						coin: '', //所需积分-存在优惠的情况
						brand_id: '',
						buy_link: '', //购买链接
						id: ''

					}
				}
				getCategoryList().then(res => {
					this.categoryList = res.data || []
				})
				getBrandList().then(res => {
					this.brandList = res.data || []
				})
			}
		}
	},
	mounted() { },
	methods: {
		setUrl(val) {
			this.submitForm.img = val
			this.$emit('setUrl', val)
		},
		submit() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					const params = {
						...this.submitForm
					}
					console.log(params);
					if (this.title=='编辑商品') {
						updateGoods(params).then(res => {
							this.dialogVisible = false
							this.$emit('getList', true)
						})
					} else {
						insertGoods(params).then(res => {
							this.$message({
								message: '新增成功',
								type: 'success'
							})
							this.dialogVisible = false
							this.$emit('getList', true)
						})
					}

				} else {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
					return false
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tip {
	line-height: 35px;
	margin-bottom: 10px;
}
</style>
